import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    Layout, List, Divider, Table, Select, Space,
    Button, Modal, Form, Input, Row, Col,
    Card , Tree, Tooltip,message
} from 'antd';
import {dataObjInitQuery} from "../api/dataObject";
import {getDims,getDims2,delDimMbr,getTheMbr,getDimMbrs} from "../api/dim";
import {BarChartOutlined,FieldStringOutlined,FilterOutlined,TableOutlined,SaveOutlined,
    EyeOutlined,CloseOutlined,ToolOutlined} from "@ant-design/icons";

export default class CaAnalysisManage extends Component {

    constructor(props) {
        super(props)
        this.state = {
            dims:[],  //维度对象集合
            currentDim:{},  //当前维度
            dimMbrs:[],//dimession members
            caDataObjectDims:[], //数据对象维度{dimId:dim,member[]:members}
            caDataObjectMbrs:[],  //members
            isModalVisibleForTitle:false,  //标题对话框
            isModalVisibleForChart:false,  //标题对话框

            caAnalyzerTexts:[],  //标题对象集合
            currentCaAnalyzerText:{state:"new",key:"",text:""},
            titleModifyState:"0",  //0是新增加  1 是编辑

//chart
            caAnalyzerCharts:[],  //标题对象集合(eidtState,id,key,text,dataObject,chartType,left,top)
            currentCaAnalyzerChart:{},


        }
    }

    componentDidMount() {

    }

    drop=(event)=>{
        console.log(event)
        //找到这个card id  找到对应的对象  设置对象的属性
        let k=event.dataTransfer.getData('title-key');
        console.log('title-key:'+k);

        let x=document.getElementById("contentPanel");
        //let y=document.getElementById("contentPanel");
        let _l=event.clientX-x.offsetLeft;
        let _t=event.clientY-x.offsetTop;

        //console.log("x:"+x+" ;y:"+y+" ;eventclientX:"+event.clientX+" ;event.clientY:"+event.clientY+";_l:"+_l+"_t:"+_t);

       let l=event.clientX-x.offsetLeft-30;  // 其实是没有理解 先修正吧
       let t=event.clientY-x.offsetTop-20;
       let _caAnalyzerText=this.state.caAnalyzerTexts.find(t=>t.key==k)

        if(_caAnalyzerText!==undefined){
            _caAnalyzerText.setLeft(l);
            _caAnalyzerText.setTop(t);
        }
        this.setState({caAnalyzerTexts:this.state.caAnalyzerTexts})
    }

     onDrop = info => {
        console.log(info)
    }



     allowDrop=(event)=>
    {
        event.preventDefault();
    };


    addTitle=()=>{
        this.setState({isModalVisibleForTitle:true,titleModifystate:"0",currentCaAnalyzerText:{state:"new",key:"",text:""}})
    }

    addChart=()=>{
        this.setState({isModalVisibleForChart:true,currentCaAnalyzerChart:{state:"new",key:"",text:""}})
    }



    addSelect=()=>{
        //todo add title
    }

    addPivotTable=()=>{
        //todo add title
    }



    chooseFolder=()=>{
        //todo add title
    }

    previewAnalysis=()=>{
        //todo add title
    }

     handleCancelForTitle = () => {
         this.setState({isModalVisibleForTitle:false})
    };

    handleCancelForChart = () => {
        this.setState({isModalVisibleForChart:false})
    };

     onFinishForTitle = (values) => {
         //todo 还需要补充 编辑的情况
        console.log('Success:', values);
        console.log('titleModifyState:', this.state.titleModifyState);

         if(values.state==="new"){  //new

             //判断一下是否可以重复
             if(this.state.caAnalyzerTexts!=undefined &&
                 this.state.caAnalyzerTexts.length>0){
                let _t=this.state.caAnalyzerTexts.filter(item=>{return item.key==values.key});
                    if(_t!=undefined  && _t.length>0){
                        message.info("重复的key")
                        return
                     }
             }

             let _caAnalyzerText = new CaAnalyzerText("new",0,values.key,values.text,0,0);  //布局树
             let _caAnalyzerTexts=this.state.caAnalyzerTexts;
             _caAnalyzerTexts.push(_caAnalyzerText);
             this.setState({caAnalyzerTexts:_caAnalyzerTexts,isModalVisibleForTitle:false})
         }else if(values.state==="edit"){ //edit
             // query obj  && set key 、setText
             console.log(this.state.caAnalyzerTexts)

             //let _caAnalyzerText=this.state.caAnalyzerTexts.find(item=>item.key==values.key);

             let _caAnalyzerTexts=this.state.caAnalyzerTexts.filter(item=>{return item.key==values.key});

             console.log(this.state.caAnalyzerTexts)
             _caAnalyzerTexts[0].setText(values.text)
             console.log(this.state.caAnalyzerTexts)


            this.setState({caAnalyzerTexts:this.state.caAnalyzerTexts,isModalVisibleForTitle:false})
         }
    };



    onFinishForChart = (values) => {
        //todo 还需要补充 编辑的情况
        console.log('Success:', values);

        if(values.state==="new"){  //new

            //判断一下是否可以重复
            if(this.state.caAnalyzerCharts!=undefined &&
                this.state.caAnalyzerCharts.length>0){
                let _t=this.state.caAnalyzerTexts.filter(item=>{return item.key==values.key});
                if(_t!=undefined  && _t.length>0){
                    message.info("重复的key")
                    return
                }
            }

            let _caAnalyzerChart = new CaAnalyzerChart("new",0,values.key,values.text,values.dataObject,values.chartType,0,0);  //布局树
            let _caAnalyzerCharts=this.state.caAnalyzerCharts;
            _caAnalyzerCharts.push(_caAnalyzerChart);
            this.setState({caAnalyzerCharts:_caAnalyzerCharts,isModalVisibleForChart:false})
        }else if(values.state==="edit"){ //edit
            // query obj  && set key 、setText
            console.log(this.state.caAnalyzerTexts)

            //let _caAnalyzerText=this.state.caAnalyzerTexts.find(item=>item.key==values.key);

            let _caAnalyzerCharts=this.state.caAnalyzerCharts.filter(item=>{return item.key==values.key});

            _caAnalyzerCharts[0].setText(values.text)
            //todo   add other property

            this.setState({caAnalyzerCharts:this.state.caAnalyzerCharts,isModalVisibleForChart:false})
        }
    };



     onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };


    removeTitle=(key)=>{
        let  t=this.state.caAnalyzerTexts;
        t.splice(t.findIndex(item => item.key === key), 1);
        this.setState({caAnalyzerTexts:t})
    }

    editTitle=(key)=>{
        let  t=this.state.caAnalyzerTexts;
        let _titleObj=t.find(item => item.key === key)
        _titleObj.setState("edit")
        this.setState({currentCaAnalyzerText:_titleObj,titleModifyState:"1",isModalVisibleForTitle:true})
        console.log("titleModifystate："+this.state.currentCaAnalyzerText)
        console.log("titleModifystate："+this.state.titleModifystate)
    }

    render() {
        const toolItemStyle={
            marginTop:"10px",
            marginLeft:"3px",
            marginRight:"3px"
        }

        const { Option } = Select;
        const layoutStyle={
            height:"100%"
        }

        const { Header, Footer, Sider, Content } = Layout;

        const ondragstart_title=(event,key)=>{
            console.log(event);
            console.log("********************************")
            console.log(key)

            event.dataTransfer.setData('title-key', key);


        }

        return (
           <div style={{width:"100%",height:"100%",display:"flex"}}>
               <Col style={{backgroundColor:"#f4f5f9"}}>
                   <Row>
                   <Tooltip title="标题">
                       <Button  icon={<FieldStringOutlined />}  onClick={() => this.addTitle()}/>
                   </Tooltip>
                   </Row>
                   <Row style={toolItemStyle}>
                   <Tooltip title="条件">
                        <Button  icon={<FilterOutlined />}  onClick={() => this.addSelect()}/>
                   </Tooltip>
                   </Row>
                   <Row style={toolItemStyle}>

                   <Tooltip title="透视表">
                       <Button  icon={ <TableOutlined />}  onClick={() => this.addPivotTable()}/>
                   </Tooltip>
                   </Row>

                   <Row style={toolItemStyle}>

                   <Tooltip title="图表">
                       <Button  icon={ <BarChartOutlined />}  onClick={() => this.addChart()}/>
                   </Tooltip>
                   </Row>

                   <Row style={toolItemStyle}>
                   <Tooltip title="保存">
                       <Button  icon={<SaveOutlined />}  onClick={() => this.chooseFolder()}/>
                   </Tooltip>
                   </Row>


                   <Row style={toolItemStyle}>
                   <Tooltip title="预览">
                       <Button  icon={<EyeOutlined />}  onClick={() => this.previewAnalysis()}/>
                   </Tooltip>
                   </Row>
               </Col>

               <Col  id="contentPanel" style={{flex:"1 1 auto",position:"relative" }}  onDrop={this.drop} onDragOver={this.allowDrop}>

                   {
                       this.state.caAnalyzerTexts.map((caAnalyzerText,index)=>{
                           return (
                           <Card size="small" title="描述信息" key={caAnalyzerText.key} extra={<>
                               <Button type="link"  onClick={({})=>{this.editTitle(caAnalyzerText.key)}}><ToolOutlined /></Button>
                               <Button type="link"  onClick={({})=>{this.removeTitle(caAnalyzerText.key)}}><CloseOutlined /></Button></>}
                                 draggable
                                 onDragStart={(event)=>ondragstart_title(event,caAnalyzerText.key)}
                                 style={{ width: 300, position: "absolute",left:caAnalyzerText.left,top:caAnalyzerText.top}}>
                                <h5>{caAnalyzerText.text}</h5>
                           </Card>
                           )
                      })
                   }

               </Col>

               <Modal title="描述信息"
                      key="descModal"
                      visible={this.state.isModalVisibleForTitle}
                      onCancel={this.handleCancelForTitle}
                      destroyOnClose
                      footer={null}
               >


                   <Form
                       name="basic"
                       labelCol={{
                           span: 4,
                       }}
                       wrapperCol={{
                           span: 20,
                       }}

                       initialValues={{
                           state:this.state.currentCaAnalyzerText.state,
                           key:this.state.currentCaAnalyzerText.key,
                           text:this.state.currentCaAnalyzerText.text,
                       }}

                       onFinish={this.onFinishForTitle}
                       onFinishFailed={this.onFinishFailed}

                   >

                       <Form.Item
                           label="state"
                           name="state"
                           hidden={true}
                           rules={[
                               {
                                   required: true,
                                   message: 'Please input your state!',
                               },
                           ]}
                       >
                           <Input />
                       </Form.Item>

                       <Form.Item
                           label="key"
                           name="key"
                           rules={[
                               {
                                   required: true,
                                   message: 'Please input your key!',
                               },
                           ]}
                       >
                           <Input />
                       </Form.Item>



                       <Form.Item
                           label="描述"
                           name="text"
                           rules={[
                               {
                                   required: true,
                                   message: 'Please input your title!',
                               },
                           ]}
                       >
                           <Input />
                       </Form.Item>






                       <Form.Item
                           wrapperCol={{
                               offset: 16,
                               span: 8,
                           }}
                       >
                           <Button type="primary" htmlType="submit">
                               确定
                           </Button>

                           <Button onClick={this.handleCancelForTitle}>
                               取消
                           </Button>

                       </Form.Item>
                   </Form>



               </Modal>




               <Modal title="选择图形"
                      key="chartModal"
                      visible={this.state.isModalVisibleForChart}
                      onCancel={this.handleCancelForChart}
                      destroyOnClose
                      footer={null}
               >


                   <Form
                       name="basic"
                       labelCol={{
                           span: 4,
                       }}
                       wrapperCol={{
                           span: 20,
                       }}

                       initialValues={{
                           state:this.state.currentCaAnalyzerChart.state,
                           key:this.state.currentCaAnalyzerChart.key,
                           text:this.state.currentCaAnalyzerChart.text,
                       }}

                       onFinish={this.onFinishForChart}
                       onFinishFailed={this.onFinishFailed}

                   >

                       <Form.Item
                           label="state"
                           name="state"
                           hidden={true}
                           rules={[
                               {
                                   required: true,
                                   message: 'Please input your state!',
                               },
                           ]}
                       >
                           <Input />
                       </Form.Item>

                       <Form.Item
                           label="key"
                           name="key"
                           rules={[
                               {
                                   required: true,
                                   message: 'Please input your key!',
                               },
                           ]}
                       >
                           <Input />
                       </Form.Item>



                       <Form.Item
                           label="描述"
                           name="text"
                           rules={[
                               {
                                   required: true,
                                   message: 'Please input your title!',
                               },
                           ]}
                       >
                           <Input />
                       </Form.Item>


                       <Form.Item
                           label="数据对象"
                           name="dataObject"
                           rules={[
                               {
                                   required: true,
                                   message: 'Please input your title!',
                               },
                           ]}
                       >
                           <Select defaultValue="microYH" style={{ width: 120 }}
                                  // onChange={this.handleDataObjectChange}
                           >
                               <Option value="microYH">微软雅黑</Option>
                               <Option value="st">宋体</Option>
                               <Option value="xst">新宋体</Option>
                               <Option value="ht">黑体</Option>
                               <Option value="fs">仿宋</Option>
                               <Option value="kt">楷体</Option>
                           </Select>
                       </Form.Item>


                       <Form.Item
                           label="图形"
                           name="chartType"
                           rules={[
                               {
                                   required: true,
                                   message: 'Please input your title!',
                               },
                           ]}
                       >
                           <Select defaultValue="microYH" style={{ width: 120 }}
                               // onChange={this.handleDataObjectChange}
                           >
                               <Option value="microYH">微软雅黑</Option>
                               <Option value="st">宋体</Option>
                               <Option value="xst">新宋体</Option>
                               <Option value="ht">黑体</Option>
                               <Option value="fs">仿宋</Option>
                               <Option value="kt">楷体</Option>
                           </Select>
                       </Form.Item>







                       <Form.Item
                           wrapperCol={{
                               offset: 16,
                               span: 8,
                           }}
                       >
                           <Button type="primary" htmlType="submit">
                               确定
                           </Button>

                           <Button onClick={this.handleCancelForTitle}>
                               取消
                           </Button>

                       </Form.Item>
                   </Form>



               </Modal>




           </div>




        );
    }
}


//标题栏目
class CaAnalyzerText{
    constructor(eidtState,id,key,text,left,top)
    {
        this.id=id;  // 数值
        this.key=key;  // 数值
        this.text=text;  // 数值
        this.left=left;
        this.top=top;
        this.state=eidtState;
    }

    setId(id){
        this.id=id;
    }
    getId(){
        return this.id
    }
    getKey(){
        return this.key
    }
    getText(){
        return this.text
    }
    setText(text){
        this.text=text;
    }
    setLeft(left){
        this.left= left
    }

    setTop(top){
        this.top= top
    }
    getLeft(){
        return this.left
    }
    getTop(){
        return this.top
    }

    setState(state){
        this.state=state;
    }

    getState(){
        return this.state;
    }

}

//图形
class CaAnalyzerChart{
    constructor(eidtState,id,key,text,dataObject,chartType,left,top)
    {
        this.id=id;  // 数值
        this.key=key;  // 数值
        this.text=text;  // 数值
        this.left=left;
        this.top=top;
        this.state=eidtState;
        this.dataObject=dataObject;
        this.chartType=chartType;
    }

    setId(id){
        this.id=id;
    }
    getId(){
        return this.id
    }
    getKey(){
        return this.key
    }
    getText(){
        return this.text
    }
    setText(text){
        this.text=text;
    }
    setLeft(left){
        this.left= left
    }

    setTop(top){
        this.top= top
    }
    getLeft(){
        return this.left
    }
    getTop(){
        return this.top
    }

    setState(state){
        this.state=state;
    }

    getState(){
        return this.state;
    }

}

